<!DOCTYPE html>
<head>
<style>

  h1 {
    text-align: right;
  }

  #headerbar {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    background-color: white;
    height: 70px;
    z-index: -1;
}

  #navgbar {
    list-style: none;
    top: 49;
    left: 0;
    margin: 0;
    width: 100%;
    position: absolute;
    background-color: white;
  }
  
  #navgbar li {
    float: left;
  }
 
  #navgbar li li {
    float: none;
    list-style-type: none;
    }
  #navgbar ol {
    padding: 0px;
    margin: 0px;
    }
  #navgbar ol ol {
    position: absolute;
    margin-top: -100px;
    -webkit-transition: margin-top 1s ease-in;
    z-index: -2;
  }
  #navgbar li:hover ol {
    margin-top: 0px;
  }
  
  #navgbar a {
    display: block;
    padding: 15px;
    border: 1px solid white;
    border-radius: 7px;
    margin-right: 2px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(grey), to(black));
    color: white;
  }
  
  #navgbar a:hover {
    background: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(grey));
  }
  #placeholderkitty {
    visibility: hidden;
  }

  .contentbox {
    border-radius: 10px;
    border: 1px solid;
    background-color: #66CD00;
    padding: 10px;
    margin: 0px;
  }
  .biggerbox {
    position: fixed;
    border: 1px solid;
    border-radius: 10px;
    background-color: #458B00;
    padding: 15px;
    z-index: -3;
    }
  
</style>
</head>

<body>
<div id="headerbar">
</div>

<h1>Introducing FriendFinder!</h1>


<div id="navgbar">
<ol>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/downloads">Download</a>
      <ol>
          <li><a href="/freetrial">Free Trial</a></li>
          <li><a href="/fullversion">Full Version</a></li>
      </ol>
    </li>
    <li> <a href="/contactUs">Contact</a>
      <ol>
          <li><a href="/cassie">Cassie</a></li>
          <li><a href="/nora">Nora</a></li>
      </ol>
    </li>  
</ol>
</div>

<img id="placeholderkitty" src="//placekitten.com/300/35">

<div class="biggerbox">

<h2>Find your friend in a crowd!</h2>

<div class="contentbox">
<table>
<td>
<p> If you've ever been separated from a friend in a noisy crowd, 
you know the agony of attempting to find them again. With the FriendFinder,
reconnecting is easy! Simply enter your user ID and the ID of your friend, 
and this app will tell you how far apart you are and in what direction you 
need to look. Only $3.99, download the FriendFinder today!
</p>
</td>
<td>
<img src="friendsCartoon.jpg">
</td>
</table>
</div>

<h3>Sign up for our mailing list</h3>

<form>
  <div>
    Name: <input type="text"> 
  </div>
  <div>
    Email: <input type="text">
  </div>
  <div>
    Age: <input type="text">
  </div>
</form>


</div>




</body>
